<title>总体情况分析</title>

<div class="page animation-fade page-ecommerce">
    <div class="page-header" style="background:none;">
        <h1 class="page-title font-size-26 font-weight-100">概览</h1>
        <div class="page-header-actions" style="padding-top: 20px;">
            <button type="button" class="btn btn-icon btn-info collapsed" data-toggle="collapse"
                    data-target="#collapseFilter" aria-expanded="false" aria-controls="collapseFilter">
                <i class="icon fa-filter"></i>
            </button>
        </div>
    </div>
    #parse("/common/loading.html")
    <div class="page-content">
        <div class="collapse" id="collapseFilter" aria-expanded="true">
            <div class="panel">
                <div class="panel-body">
                    <form class="form-horizontal" id="form">
                        <div class="form-group">
                            <div class="col-sm-3">
                                <label class="col-sm-4 control-label">运输单价</label>
                                <div class="col-sm-8">
                                    <input type="text" class="form-control" name="unitPrice" value="1.0">
                                </div>
                            </div>
                            <div class="col-sm-3">
                                <label class="col-sm-4 control-label">产品规格</label>
                                <div class="col-sm-8">
                                    <input type="text" class="form-control" name="volume" value="1.0">
                                </div>
                            </div>
                            <div class="col-sm-3">
                                <label class="col-sm-4 control-label">车辆载重</label>
                                <div class="col-sm-8">
                                    <input type="text" class="form-control" name="load" value="100">
                                </div>
                            </div>
                            <div class="col-sm-3">
                                <label class="col-sm-4 control-label">其他费用</label>
                                <div class="col-sm-8">
                                    <input type="text" class="form-control" name="otherExpenses">
                                </div>
                            </div>

                        </div>
                        <div class="form-group">
                            <div class="col-sm-3">
                                <label class="col-sm-4 control-label">仓储单价</label>
                                <div class="col-sm-8">
                                    <input type="text" class="form-control" name="storeUnitPrice">
                                </div>
                            </div>
                            <div class="col-sm-3">
                                <label class="col-sm-4 control-label">占地面积</label>
                                <div class="col-sm-8">
                                    <input type="text" class="form-control" name="area">
                                </div>
                            </div>
                            <div class="col-sm-3">
                                <label class="col-sm-4 control-label">商品单价</label>
                                <div class="col-sm-8">
                                    <input type="text" class="form-control" name="prize" value="50">
                                </div>
                            </div>
                            <div class="col-sm-3">
                                <label class="col-sm-4 control-label">服务水平</label>
                                <div class="col-sm-8">
                                    <input type="text" class="form-control" name="costomService" value="0.95">
                                </div>
                            </div>

                        </div>
                        <div class="form-group">
                            <div class="col-sm-3">
                                <label class="col-sm-4 control-label">处理时间</label>
                                <div class="col-sm-8">
                                    <input type="text" class="form-control" name="dealTime" value="3">
                                </div>
                            </div>
                            <div class="col-sm-3">
                                <label class="col-sm-4 control-label">持有成本</label>
                                <div class="col-sm-8">
                                    <input type="text" class="form-control" name="holdCost" value="50">
                                </div>
                            </div>
                            <div class="col-sm-3">
                                <label class="col-sm-4 control-label">订购成本</label>
                                <div class="col-sm-8">
                                    <input type="text" class="form-control" name="orderCost" value="40">
                                </div>
                            </div>
                            <div class="col-sm-3">
                                <label class="col-sm-4 control-label">总月数</label>
                                <div class="col-sm-8">
                                    <input type="text" class="form-control" name="months" value="6">
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-sm-5">
                                <a class="btn btn-success" onclick="reloadData()"><i class="icon fa-refresh"></i> 刷新
                                </a>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
        <div class="row" data-plugin="matchHeight" data-by-row="true">
            <div class="col-lg-3 col-sm-6 col-xs-12 info-panel">
                <div class="widget widget-shadow">
                    <div class="widget-content bg-white padding-20">
                        <button type="button" class="btn btn-floating btn-sm btn-warning">
                            <i class="icon fa-home"></i>
                        </button>
                        <span class="margin-left-15 font-weight-400">一级中心</span>
                        <div class="content-text text-center margin-bottom-0">
                            <span id="total" class="font-size-40 font-weight-100">&nbsp;</span>
                            <p class="blue-grey-400 font-weight-100 margin-0">&nbsp</p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-3 col-sm-6 col-xs-12 info-panel">
                <div class="widget widget-shadow">
                    <div class="widget-content bg-white padding-20">
                        <button type="button" class="btn btn-floating btn-sm btn-danger">
                            <i class="icon fa-file-text-o"></i>
                        </button>
                        <span class="margin-left-15 font-weight-400">订单量</span>
                        <div class="content-text text-center margin-bottom-0">
                            <span id="order" class="font-size-40 font-weight-100">&nbsp;</span>
                            <p class="blue-grey-400 font-weight-100 margin-0">&nbsp;</p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-3 col-sm-6 col-xs-12 info-panel">
                <div class="widget widget-shadow">
                    <div class="widget-content bg-white padding-20">
                        <button type="button" class="btn btn-floating btn-sm btn-success">
                            <i class="icon fa-truck"></i>
                        </button>
                        <span class="margin-left-15 font-weight-400">总距离</span>
                        <div class="content-text text-center margin-bottom-0">
                            <span id="distance" class="font-size-40 font-weight-100">&nbsp;</span>
                            <p class="blue-grey-400 font-weight-100 margin-0">所需车辆：<span id="vehicle"> </span>辆</p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-3 col-sm-6 col-xs-12 info-panel">
                <div class="widget widget-shadow">
                    <div class="widget-content bg-white padding-20">
                        <button type="button" class="btn btn-floating btn-sm btn-primary">
                            <i class="icon fa-yen"></i>
                        </button>
                        <span class="margin-left-15 font-weight-400">总成本</span>
                        <div class="content-text text-center margin-bottom-0">
                            <span id="cost" class="font-size-40 font-weight-100">&nbsp;</span>
                            <p class="blue-grey-400 font-weight-100 margin-0">其中租赁成本：<span id="renta"></span></p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-ms-12 col-xs-12 col-md-6">
                <div class="panel panel-bordered">
                    <div class="panel-heading">
                        <h3 class="panel-title">各一级配送中心分布情况（含订单量）</h3>
                        <div class="panel-actions">
                            <a class="icon icon-fullscreen" href="#" data-toggle="tooltip" data-placement="bottom" title="全屏"
                               onclick="Layer.open('/network/supply/overall/bar21',{})"></a>
                        </div>
                    </div>
                    <div class="panel-body padding-3 height-250" id="cost-map">

                    </div>
                </div>
            </div>
            <div class="col-ms-12 col-xs-12 col-md-6">
                <div class="panel panel-bordered">
                    <div class="panel-heading">
                        <h3 class="panel-title">各一级配送中心运输成本</h3>
                        <div class="panel-actions">
                        </div>
                    </div>
                    <div class="panel-body padding-3 height-250" id="cost-bar-one">
                    </div>
                </div>
            </div>
            <div class="col-ms-12 col-xs-12 col-md-6">
                <div class="panel panel-bordered">
                    <div class="panel-heading">
                        <h3 class="panel-title">各一级配送中心运输距离</h3>
                        <div class="panel-actions">
                        </div>
                    </div>
                    <div class="panel-body padding-3 height-250" id="cost-bar-two">
                    </div>
                </div>
            </div>
            <div class="col-ms-12 col-xs-12 col-md-6">
                <div class="panel panel-bordered">
                    <div class="panel-heading">
                        <h3 class="panel-title">各一级配送中心车辆数量占用情况</h3>
                        <div class="panel-actions">
                        </div>
                    </div>
                    <div class="panel-body padding-3 height-250" id="cost-bar-three">
                    </div>
                </div>
            </div>
            <div class="col-ms-12 col-xs-12 col-md-6">
                <div class="panel panel-bordered">
                    <div class="panel-heading">
                        <h3 class="panel-title">订货周期内库存商品占用资金水平</h3>
                        <div class="panel-actions">
                        </div>
                    </div>
                    <div class="panel-body padding-3 height-500" id="cost-bar-four">
                    </div>
                </div>
            </div>
            <div class="col-ms-12 col-xs-12 col-md-6">
                <div class="panel panel-bordered">
                    <div class="panel-heading">
                        <h3 class="panel-title">各一级配送中心1个月的平均库存分布</h3>
                        <div class="panel-actions">
                        </div>
                    </div>
                    <div class="panel-body padding-3 height-500" id="cost-bar-five">
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript">
    function initMap() {
        cost_map.setOption({
            backgroundColor: '#ffffff',
            title: {
                text: '全国主要城市空气质量',
                subtext: 'data from PM25.in',
                sublink: 'http://www.pm25.in',
                left: 'center',
                textStyle: {
                    color: '#fff'
                },
                show: false
            },
            tooltip: {
                trigger: 'item'
            },
            legend: {
                orient: 'vertical',
                y: 'bottom',
                x: 'right',
                data: ['pm2.5'],
                textStyle: {
                    color: '#fff'
                }
            },
            geo: {
                map: 'china',
                label: {
                    emphasis: {
                        show: false
                    }
                },
                roam: true,
                itemStyle: {
                    normal: {
                        areaColor: '#323c48',
                        borderColor: '#111'
                    },
                    emphasis: {
                        areaColor: '#2a333d'
                    }
                }
            },
            series: [
                {
                    name: '订单量',
                    type: 'scatter',
                    coordinateSystem: 'geo',
                    data: [],
                    symbolSize: function (val) {
                        return val[2] / 1500;
                    },
                    label: {
                        normal: {
                            formatter: '{b}',
                            position: 'right',
                            show: false
                        },
                        emphasis: {
                            show: true
                        }
                    },
                    itemStyle: {
                        normal: {
                            color: '#ddb926'
                        }
                    }
                }
            ]
        });
    }

    function initbarOne() {
        cost_bar_one.setOption({
            title: {
                text: '某地区蒸发量和降水量',
                subtext: '纯属虚构',
                show: false
            },
            tooltip: {
                trigger: 'axis'
            },
            xAxis: [
                {
                    type: 'category',
                    data: [],
                    axisLabel:{
                        show:true,
                        interval:0,
                        rotate: 45,//倾斜度 -90 至 90 默认为0
                        textStyle:{
                            color:"#595959"
                        }
                    },
                    axisLine: {
                        show: false
                    },
                    axisTick: {
                        show: false
                    },
                }
            ],
            yAxis: [
                {
                    type: 'value',
                    axisLine: {
                        show: false
                    },
                    axisTick: {
                        show: false
                    },
                    axisLabel: {
                        formatter: function(value){
                            var var1=value*1;
                            return var1;
                        },
                        textStyle:{
                            color:"#595959"
                        }
                    },
                    splitLine:{
                        show:true
                    },
                    splitArea: {
                        show:true,
                        areaStyle: {
                            color: ['rgba(0,0,0,0)', 'rgba(0,0,0,0)']
                        }
                    },
                }
            ],
            grid: {
                left: '3%',
                right: '3%',
                bottom: '12%',
                top:'5%',
                containLabel: true
            },
            series: [
                {
                    name: '成本',
                    type: 'bar',
                    data: [],
                    itemStyle: {
                        normal: {
                            //好，这里就是重头戏了，定义一个list，然后根据所以取得不同的值，这样就实现了，
                            color: '#4472c4',
                            //以下为是否显示，显示位置和显示格式的设置了
                        }},
                }
            ]
        });
    }

    function initbarTwo() {
        cost_bar_two.setOption({
            title: {
                text: '某地区蒸发量和降水量',
                subtext: '纯属虚构',
                show: false
            },
            tooltip: {
                trigger: 'axis'
            },
            xAxis: [
                {
                    type: 'category',
                    data: [],
                    axisLabel:{
                        show:true,
                        interval:0,
                        rotate: 45,//倾斜度 -90 至 90 默认为0
                        textStyle:{
                            color:"#595959"
                        }
                    },
                    axisLine: {
                        show: false
                    },
                    axisTick: {
                        show: false
                    },
                }
            ],
            yAxis: [
                {
                    type: 'value',
                    axisLine: {
                        show: false
                    },
                    axisTick: {
                        show: false
                    },
                    axisLabel: {
                        formatter: function(value){
                            var var1=value*1;
                            return var1;
                        },
                        textStyle:{
                            color:"#595959"
                        }
                    },
                    splitLine:{
                        show:true
                    },
                    splitArea: {
                        show:true,
                        areaStyle: {
                            color: ['rgba(0,0,0,0)', 'rgba(0,0,0,0)']
                        }
                    },
                }
            ],
            grid: {
                left: '3%',
                right: '3%',
                bottom: '12%',
                top:'5%',
                containLabel: true
            },
            series: [
                {
                    name: '距离',
                    type: 'bar',
                    data: [],
                    itemStyle: {
                        normal: {
                            //好，这里就是重头戏了，定义一个list，然后根据所以取得不同的值，这样就实现了，
                            color: '#c9eee7',
                            //以下为是否显示，显示位置和显示格式的设置了
                        }},
                }
            ]
        });
    }

    function initbarThree() {
        cost_bar_three.setOption({
            title: {
                text: '某地区蒸发量和降水量',
                subtext: '纯属虚构',
                show: false
            },
            tooltip: {
                trigger: 'axis'
            },
            xAxis: [
                {
                    type: 'category',
                    data: [],
                    axisLabel:{
                        show:true,
                        interval:0,
                        rotate: 45,//倾斜度 -90 至 90 默认为0
                        textStyle:{
                            color:"#595959"
                        }
                    },
                    axisLine: {
                        show: false
                    },
                    axisTick: {
                        show: false
                    },
                }
            ],
            yAxis: [
                {
                    type: 'value',
                    axisLine: {
                        show: false
                    },
                    axisTick: {
                        show: false
                    },
                    axisLabel: {
                        textStyle: {
                            color: '#999'
                        }
                    }
                }
            ],
            grid: {
                left: '3%',
                right: '3%',
                bottom: '12%',
                top:'5%',
                containLabel: true
            },
            series: [
                {
                    name: '车辆数目',
                    type: 'bar',
                    data: []
                }
            ]
        });
    }
    function initbarFour() {
        cost_bar_four.setOption({
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'cross',
                    crossStyle: {
                        color: '#999'
                    }
                }
            },
            toolbox: {
                trigger: 'axis',
                axisPointer: {
                    type: 'cross',
                    crossStyle: {
                        color: '#998492'
                    }
                },
            },
            grid:{
                left: '3%',
                right: '3%',
                bottom: '5%',
                top:'5%',
                containLabel: true
            },
            xAxis:{
                type: 'value',
                axisLine: {
                    show: false
                },
                axisTick: {
                    show: false
                },

                splitLine:{
                    show:true
                },
                axisLabel: {
                    formatter: function(value){
                        var var1=value*1;
                        return var1;
                    },
                    textStyle:{
                        color:"#595959"
                    }
                },
                splitArea: {
                    show: true,
                    areaStyle: {
                        color: ['rgba(0,0,0,0)', 'rgba(0,0,0,0)']
                    }
                },
            },
            yAxis: [
                {
                    type: 'value',
                //    name: '资金量',
                    axisLine: {
                        show: false
                    },
                    axisTick: {
                        show: false
                    },
                    axisLabel: {
                        formatter: function(value){
                            var var1=value*1;
                            return var1;
                        },
                        textStyle:{
                            color:"#595959"
                        }
                    },
                    splitLine:{
                        show:true
                    },
                    splitArea: {
                        show:true,
                        areaStyle: {
                            color: ['rgba(0,0,0,0)', 'rgba(0,0,0,0)']
                        }
                    },
                },
                {
                    type: 'value',
                    //   name: '订货频次',
                    axisLine: {
                        show: false
                    },
                    axisTick: {
                        show: false
                    },
                    axisLabel: {
                        formatter: function(value){
                            var var1=value*1;
                            return var1;
                        },
                        textStyle:{
                            color:"#595959"
                        }
                    },
                    splitArea: {
                        show: true,
                        areaStyle: {
                            color: ['rgba(0,0,0,0)', 'rgba(0,0,0,0)']
                        }
                    },
                }
            ],
            series: [
                {
                    type: 'bar',
                    data: [],
                    itemStyle: {
                        normal: {
                            //好，这里就是重头戏了，定义一个list，然后根据所以取得不同的值，这样就实现了，
                            color:'#0fa99d',
                            label: {
                                show: true,
                                position: 'insideRight',//数据在中间显示
                            }
                            //以下为是否显示，显示位置和显示格式的设置了
                        }}
                },
                {
                  //  name:'资金量',
                    type:'line',
                    data:[],
                  //  barWidth:20,
                    itemStyle: {
                        normal: {
                            //好，这里就是重头戏了，定义一个list，然后根据所以取得不同的值，这样就实现了，
                            color: '#2350a9'
                        },
                        //以下为是否显示，显示位置和显示格式的设置了
                    }
                }
            ]
        });
    }
    function initbarFive() {
        cost_bar_five.setOption({
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'cross'
                }
            },
            grid:{
                left: '3%',
                right: '3%',
                bottom: '5%',
                top:'5%',
                containLabel: true
            },
            xAxis:  {
                type: 'value',
                axisLine: {
                    show: false
                },
                axisTick: {
                    show: false
                },

                splitLine:{
                    show:true
                },
                axisLabel: {
                    formatter: function(value){
                        var var1=value*1;
                        return var1;
                    },
                    textStyle:{
                        color:"#595959"
                    }
                },
                splitArea: {
                    show: true,
                    areaStyle: {
                        color: ['rgba(0,0,0,0)', 'rgba(0,0,0,0)']
                    }
                },
            },
            yAxis: [ {
                type: 'value',
               // name: '订单量',
                data:[],
                axisLabel:{
                    show:true,
                    textStyle:{
                        color:"#595959"
                    }
                },
                axisLine: {
                    show: false
                },
                axisTick: {
                    show: false
                },
            },
                {
                    type: 'value',
                 //   name: '订货频次',
                    axisLine: {
                        show: false
                    },
                    axisTick: {
                        show: false
                    },
                    axisLabel: {
                        formatter: function(value){
                            var var1=value*1;
                            return var1;
                        },
                        textStyle:{
                            color:"#595959"
                        }
                    },
                    splitArea: {
                        show: true,
                        areaStyle: {
                            color: ['rgba(0,0,0,0)', 'rgba(0,0,0,0)']
                        }
                    },
                }
            ],

            series: [
                {
                  //  name:'订单量',
                    type:'line',
                    data:[],
                    itemStyle: {
                        normal: {
                            //好，这里就是重头戏了，定义一个list，然后根据所以取得不同的值，这样就实现了，
                            color: '#4472c4',
                            //以下为是否显示，显示位置和显示格式的设置了
                        }},
                    areaStyle: {normal: {
                        color:"#d9d9d9"
                    }},
                },
                {
                  //  name:'订货频次',
                    type: 'bar',
                    data: [],
                    itemStyle: {
                        normal: {
                            //好，这里就是重头戏了，定义一个list，然后根据所以取得不同的值，这样就实现了，
                            color:'#0fa99d',
                            label: {
                                show: true,
                                position: 'insideRight',//数据在中间显示
                            }
                            //以下为是否显示，显示位置和显示格式的设置了
                        }}

                }
            ]
        });
    }


    function reloadData() {
        document.getElementById("loading").style.display="";
        var param = Form.getParams($("#form"));
        param.batchId = "59";
        $.ajax({
            url: "#springUrl('/network/supply/overall/getDataNew')",
            data: param,
            type: "POST",
            success: function (text) {
                var d = JSON.parse(text);
                if (d.success && d.data) {
                    $("#total").html(d.data.data.length);
                    $("#order").html(d.data.totalOrder);
                    $("#distance").html(d.data.totalDistance);
                    $("#cost").html("&yen;" + d.data.totalCost);
                    $("#vehicle").html(d.data.totalVehicle);
                    $("#renta").html("&yen;" + d.data.renta);
                    //更新数据
                    var option = cost_map.getOption();
                    var mapData = [];
                    var xData = [];
                    var costData = [];
                    var distanceData = [];
                    var vehicleData = [];
                    $.each(d.data.data, function (index, row) {
                        mapData.push({name: row.name, value: [row.coordinateX, row.coordinateY, row.order]});
                        xData.push(row.name);
                        costData.push(row.cost);
                        distanceData.push(row.distance);
                        vehicleData.push(row.vehicle);
                    });
                    option.series[0].data = mapData;
                    cost_map.setOption(option);

                    option = cost_bar_one.getOption();
                    option.xAxis = [
                        {
                            type: 'category',
                            data: xData
                        }
                    ];
                    option.series[0].data = costData;
                    cost_bar_one.setOption(option);

                    option = cost_bar_two.getOption();
                    option.xAxis = [
                        {
                            type: 'category',
                            data: xData
                        }
                    ];
                    option.series[0].data = distanceData;
                    cost_bar_two.setOption(option);

                    option = cost_bar_three.getOption();
                    option.xAxis = [
                        {
                            type: 'category',
                            data: xData
                        }
                    ];
                    option.series[0].data = vehicleData;
                    cost_bar_three.setOption(option);

                    option = cost_bar_four.getOption();
                    option.yAxis = [
                        {
                            type: 'category',
                            data: d.data.x1,
                        }
                    ];
                    option.series[0].data=d.data.x2;
                  //  option.series[1].data=d.data.x2;
                    cost_bar_four.setOption(option);

                    option = cost_bar_five.getOption();
                    option.yAxis = [
                        {
                            type: 'category',
                            data: d.data.x1,
                        }
                    ];
                  //  option.series[0].data=d.data.x3;
                    option.series[1].data=d.data.x3;
                    cost_bar_five.setOption(option);
                    document.getElementById("loading").style.display="none";
                }else{
                    document.getElementById("loading").style.display="none";
                    toastr.error(d.message);
                    var div1="<div type='text' style='padding-top:10%' class=' text-center '>"+d.message+"</div>";
                    $("#cost-map").empty();
                    $("#cost-map").prepend(div1);
                    $("#cost-bar-one").empty();
                    $("#cost-bar-one").prepend(div1);
                    $("#cost-bar-two").empty();
                    $("#cost-bar-two").prepend(div1);
                    $("#cost-bar-three").empty();
                    $("#cost-bar-three").prepend(div1);
                    $("#cost-bar-four").empty();
                    $("#cost-bar-four").prepend(div1);
                    $("#cost-bar-five").empty();
                    $("#cost-bar-five").prepend(div1);
                }
            }
        });
    }

    $(function () {
        window.cost_map = echarts.init(document.getElementById('cost-map'), 'macarons');
        window.cost_bar_one = echarts.init(document.getElementById('cost-bar-one'), 'macarons');
        window.cost_bar_two = echarts.init(document.getElementById('cost-bar-two'), 'macarons');
        window.cost_bar_three = echarts.init(document.getElementById('cost-bar-three'), 'macarons');
        window.cost_bar_four = echarts.init(document.getElementById('cost-bar-four'), 'macarons');
        window.cost_bar_five = echarts.init(document.getElementById('cost-bar-five'), 'macarons');

        initMap();
        initbarOne();
        initbarTwo();
        initbarThree();
        initbarFour();
        initbarFive();

        $("#form input").blur(function () {
            var val = $(this).val();
            if (val && (!/^\d+(\.\d{1,2})?$/.test(val))) {
                toastr.warning("只能输入两位小数的正数");
                $(this).val("");
            }
        });
        reloadData();
    });

</script>

